﻿@*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in the root of the repo.*@

@model IEnumerable<OfficeAddinMicrosoftGraphASPNET.Models.ExcelWorkbook>

@{
    ViewBag.Title = "MS Graph Data Page";
}

<script src="~/Scripts/UIFabric.js" type="text/javascript"></script>
<script src="~/Scripts/Spinner.js" type="text/javascript"></script>

    <div class="ms-bgColor-neutralLight welcome">
        <div class="ms-fontSize-xl ms-fontColor-themePrimary">Excel Charts in OneDrive</div>
        <div class="ms-font-l">You can add data from Microsoft Graph to the document on this page.</div>
    </div>

    <div id="instructionsContainer" style="display:block">
        <p class="ms-font-l ms-fontColor-themePrimary indentFromPaneEdge centeredText">Press <b>Get OneDrive File Names</b> to add data to the document.</p>
    </div>

    <div id="waitContainer" style="display:none">
        <p class="ms-font-l ms-fontColor-themePrimary indentFromPaneEdge centeredText">We're getting the data for you.</p>
        <div class="ms-Spinner"></div>
    </div>

    <div id="finishedContainer" style="display:none">
        <p class="ms-font-l ms-fontColor-themePrimary indentFromPaneEdge centeredText">The data has been added to the document.</p>
    </div>


    @* Custom CSS "onedrivefilesfooter" class is fixed to the bottom of the page so it is visible even if the task pane is scrolled. *@
    <footer id="footer" class="onedrivefilesfooter ms-bgColor-neutralLight">
        <div class="container">

            @* Button to get files from Office 365 *@
            <p align="center">
                <button id="getOneDriveFilesButton" class="popupButton ms-Button ms-Button--primary"><span class="ms-Button-label">Get OneDrive File Names</span></button>
            </p>

            @* Button to sign out from Office 365 *@
            <p align="center">
                <button id="logoutO365PopupButton" class="popupButton ms-Button ms-Button--primary"><span class="ms-Button-label">Logout of Office 365</span></button>
            </p>
        </div>
    </footer>

<script src="~/Scripts/Document.js" type="text/javascript"></script>

